﻿<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>中国地图</title>
  <meta charset="utf-8" />
  <script src="../mapbox-gl-unminified.js"></script>
  <!-- <script src="https://geodan.github.io/mapbox-3dtiles/mapbox-gl.js"></script> -->
  <script src="../dist.min.js"></script>
  <link href="../mapbox-gl.css" rel="stylesheet" />
  <script src="../three.min.js"></script>
  <script src="../GLTFLoader.js"></script>
  <script src="../Mapbox3DTiles.js"></script>
  <script src="../proj4.js"></script>

  <!-- <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      overflow: hidden;
    }

    #map {
      height: 100%;
      z-index: 0;
    }
  </style> -->
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>

</head>

<body>

  <style type='text/css'>
    #info {
      display: block;
      position: relative;
      margin: 0px auto;
      width: 50%;
      padding: 10px;
      border: none;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      color: #222;
      background: #fff;
    }
  </style>

  <div id="map"></div>

  <pre id='info'></pre>
  <script type="module">
    // import china_style from '../beijing_style.js';
    var layerId = 'route'
    // mapboxgl.accessToken = 'pk.eyJ1IjoicGFuanVuYW4iLCJhIjoiY2tubzVxajhoMTRsZTJvcHVuNm5xczZsNSJ9.yM9P3rQYc2PWcseB98Dv3w';
    mapboxgl.accessToken = 'pk.eyJ1IjoiYmVydHQiLCJhIjoiaWFvN1Z4USJ9.k04Q6CVms4Gx7KDZxvAx2A';

    const urlParams = new URLSearchParams(window.location.search);


    // var center = [116.38765160441415, 39.9]
    var center = [-122.4756588,37.824755]
    // var center = [4.48732, 51.90217]

    var map = new mapboxgl.Map({
      container: "map",
      center: center,
      zoom: 14,
      style: "mapbox://styles/mapbox/light-v10",

      bearing: 0,
      pitch: 45,
    });


    map.addControl(new mapboxgl.NavigationControl());

    map.on('load', function () {
      map.addSource(layerId, {
        'type': 'geojson',
        'data': {
          type: 'LineString',
          coordinates: []
          // 'properties': {},
          // 'geometry': {
          //   'type': 'LineString',
          //   'coordinates': [
          //   ]
        }
      })


      map.addLayer({
        'id': layerId,
        'type': 'line',
        'source': layerId,
        'layout': {
          'line-join': 'round',
          'line-cap': 'round'
        },
        'paint': {
          'line-color': '#111111',
          'line-width': 3
        }
      });


      let bridge = new Mapbox3DTiles.Layer({
        id: 'bridge',
        url: '../3dtiles/tileset.json',
        // url: '../ahn_points/tileset.json',
        // url: 'https://geodan.github.io/mapbox-3dtiles/ahn/tileset.json',
        color: 0x007722,
        opacity: 1.0,
        pointsize: 10.0
      });
      // map.addLayer(bridge, 'bridge');
      map.addLayer(bridge);
      console.log(bridge)
    })

    // map.on('style.load', () => {
    //   let bridge = new Mapbox3DTiles.Layer({
    //     id: 'bridge',
    //     url: '../3857M/tileset.json',
    //     color: 0x007722,
    //     opacity: 1.0,
    //     pointsize: 1.0
    //   });
    //   // map.addLayer(bridge, 'bridge');
    //   map.addLayer(bridge);
    //   console.log(bridge)
    // });


    map.on('click', function (e) {
      // map.removeLayer(layerId)
      // map.removeSource(layerId)
      console.log(e)
      document.getElementById('info').innerHTML =       /* innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML  */
        // e.point is the x, y coordinates of the mousemove event relative
        // to the top-left corner of the map
        JSON.stringify(e.point) + '<br />' +
        // e.lngLat is the longitude, latitude geographical position of the event
        JSON.stringify(e.lngLat);  /* JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串 */
      console.log(e.lngLat);

      var point = [];
      point.push(center);
      point.push(new Array(e.lngLat.lng, e.lngLat.lat))
      console.log(point)
      var pointStr = point.map(function (a) {
        return "point=" + a[1] + '%2C' + a[0];
      }).join("&");
      // var url = http://localhost:8989/route?point=39.919716%2C116.320839&point=39.899198%2C116.327904&point=39.906248%2C116.33722&point=39.896804%2C116.389848&type=json&locale=zh-CN&key=&elevation=false&profile=car";
      var url = "http://localhost:8989/route?" + pointStr + "&type=json&locale=zh-CN&key=&elevation=false&profile=car&points_encoded=false";

      console.log(url)

      var ajax = new XMLHttpRequest();
      ajax.open('get', url, true);
      ajax.send();
      ajax.onreadystatechange = function () {
        if (ajax.readyState == 4) {
          if (ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {

            var res = JSON.parse(ajax.responseText)
            console.log(res)
            // var source = map.getSource(layerId);
            // console.log(source)
            // source._data.geometry.coordinates = res.paths[0].points.coordinates;
            // console.log(source)


            var source = map.getSource(layerId);
            source.setData(res.paths[0].points)
            console.log(source)


            console.log(map)
          }
          else {
            json.error && json.error();
          }
        };
      };
    })
  </script>
</body>

</html>